<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="dtype" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" style="width: 100%;"
              @row-dblclick="showDetailDrawer">
      <el-table-column type="selection" width="80">
      </el-table-column>
      <el-table-column  width="100">
        <template slot-scope="scope">
          <span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sn" label="字典编号" width="300" sortable>
      </el-table-column>
      <el-table-column prop="name" label="字典名称" sortable>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="total, prev, pager, next, sizes, jumper"
                     @current-change="handleCurrentChange"
                     @size-change="pageSizeChange"
                     :page-size="pageSize"
                     :current-page="currentPage"
                     :total="total"
                     :page-sizes="[5, 10, 15, 30]"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--编辑界面-->
    <el-dialog :title="myTitle" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="字典编号" prop="sn" >
          <el-input v-model="editForm.sn" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典名称" prop="name" >
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!-- 抽屉 -->
    <el-drawer
        title="细部展示"
        @close="drawerClose"
        :visible.sync="showDetails"
        direction="rtl"
        size="50%">
      <!--
      抽屉高级搜索 新增
      -->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="filters">
          <el-form-item>
            <el-input v-model="detailKeyword" placeholder="关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-on:click="detailSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showDetailAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 抽屉表格 -->
      <el-table :data="detailData" highlight-current-row
                style="width: 100%;"
                @selection-change="detailSelectedChange"
                v-loading="detailListLoading">
        <el-table-column type="selection" width="60">
        </el-table-column>
        <el-table-column  width="60" >
          <template slot-scope="scope">
            <span>{{scope.$index+(detailCurrentPage - 1) * detailPageSize + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" sortable>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template scope="scope">
            <el-button size="small" @click="showDetailEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="detailDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 抽屉分页条 -->
      <el-col :span="24" class="toolbar">
        <el-button type="danger" @click="detailBatchRemove" :disabled="this.detailSelected.length===0">批量删除</el-button>
        <el-pagination layout="total, prev, pager, next, sizes, jumper"
                       @current-change="detailCurrentChange"
                       @size-change="detailPageSizeChange"
                       :page-size="detailPageSize"
                       :current-page="detailCurrentPage"
                       :total="detailToal"
                       :page-sizes="[3, 5, 10, 15]"
                       style="float:right;">
        </el-pagination>
      </el-col>
    </el-drawer>

    <!--细部新增修改界面-->
    <el-dialog :title="detailSaveOrEditName" :visible.sync="detailEditFormVisible" :close-on-click-modal="false">
      <el-form :model="detailEditForm" label-width="80px"  :rules="detailEditFormRules" ref="detailFormRef" >
        <el-form-item label="细部名:" prop="name" >
          <el-input v-model="detailEditForm.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="detailEditFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="detailEditSubmit" :loading="detailEditLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'
import { getEmployeeListPage, removeEmployee, batchRemoveEmployee, editEmployee, addEmployee } from '../../api/api';

export default {
  data() {
    return {
      //细部分页
      detailCurrentPage:1,
      detailPageSize:5,
      detailToal:0,
      //细部编辑框名
      detailSaveOrEditName:"",

      //细部编辑页面是否可见
      detailEditFormVisible:false,
      //细部编辑页面提交按钮转圈
      detailEditLoading:false,
      //细部选中
      detailSelected:[],

      //细部编辑界面数据
      detailEditForm:{
        id:null,
        name:"",
        types_id:null,
      },

      //当前打开的类型id
      currentTypeId:null,
      //表格忙等
      detailListLoading:false,
      detailData:[],
      showDetails:false,
      //细部关键字
      detailKeyword:"",

      myTitle:"",
      filters: {
        keyword: ''  //关键字查询
      },
      dtype: [],
      total: 0,
      pageSize:5,
      currentPage: 1,
      listLoading: false,
      sels: [],//当前列表选中的所有行

      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
        sn: [
          { required: true, message: '请输入编号', trigger: 'blur' }
        ],
        name:[
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      detailEditFormRules:{
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },

      //编辑界面数据
      editForm: {
        id: null,
        sn:"",
        name:"",
      }

    }
  },
  methods: {

    /* 类型每页展示条数变动函数 */
    pageSizeChange(val){
      this.pageSize = val;
      this.getDtype();
    },
    /*细部每页展示条数变动函数 */
    detailPageSizeChange(val){
      this.detailPageSize = val;
      this.getDetails();
    },
    /* 抽屉关闭函数 */
    drawerClose(){
      //清空搜索栏
      this.detailKeyword = ""
    },
    /* 细部新增或者修改函数 */
    detailEditSubmit: function () {
      this.$refs.detailFormRef.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.detailListLoading = true; //表单忙等
            //拷贝一份表单数据
            let para = Object.assign({}, this.detailEditForm);
            //发送axios请求
            this.$http.put("/detail",para)
                .then(result=>{
                  result = result.data;
                  if(result.success){
                    this.$message({
                      message: "操作成功!",
                      type: 'success'
                    });
                    this.detailEditFormVisible = false;

                  }else{
                    console.log(result.message);
                    this.$message({
                      message: result.message,
                      type: 'error'
                    });
                  }
                  this.getDetails();
                })
                .catch(result=>{
                  console.log(result.message);
                  this.$message({
                    message: "后端请求繁忙!",
                    type: 'error'
                  });
                })
            this.detailListLoading = false;
            this.detailEditLoading = false;
            this.getDetails();
          });
        }
      });
    },

    /* 选中栏改变函数 */
    detailSelectedChange(selected){
      this.detailSelected = selected;
    },
    /* 细部批量删除 */
    detailBatchRemove: function () {
      //拿到当前选中的所有行的id，传给后端批量删除
      // [1,2,3]  .toString() --> "1,2,3"
      var ids = this.detailSelected.map(item => item.id);//删除了toString
      this.$confirm('确认删除选中记录吗？', '温馨提示', {
        type: 'warning'
      }).then(() => {//确定删除

        this.$http.patch("/detail",ids)
            .then(result=>{
              result = result.data;//AjaxResult
              if(!result.success){
                this.$message({
                  message: result.message,
                  type: 'error'
                });
              }else{
                this.$message({
                  message: "批量删除成功!!",
                  type: 'success'
                });
              }
              //数据删除要定位到第一页
              if(this.detailData.length === 1 && this.detailCurrentPage > 1 ){
                this.detailCurrentPage--;
              }
              //刷新界面
              this.getDetails();
            })
            .catch(result=>{
              console.log(result);
              this.$message({
                message: '系统繁忙，稍后重试！',
                type: 'error'
              });
            })

      }).catch(() => {
      });
    },


    /* 细部删除 */
    detailDelete(index,row){
      this.$confirm('确认删除该记录吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {//确定
        this.detailListLoading = true;//开启列表加载忙等
        this.$http.delete("/detail/"+row.id)
            .then(result=>{
              this.detailListLoading = false;//关闭列表加载忙等
              result = result.data;//AjaxResult
              if(!result.success){
                this.$message({
                  message: result.message,
                  type: 'error'
                });
              }else{
                this.$message({
                  message: "删除成功!!!",
                  type: 'success'
                });
              }
              //数据删除要定位到第一页
              if(this.detailData.length === 1 && this.detailCurrentPage > 1 ){
                this.detailCurrentPage--;
              }
              //刷新列表页
              this.getDetails();
            })
            .catch(result=>{
              console.log(result);
              this.$message({
                message: '系统繁忙，稍后重试！',
                type: 'error'
              });
            })
      }).catch(() => {//取消
      });


    },
    showDetailDrawer(row, column, event){
      //发送请求根据id查询有哪些细节
      this.currentTypeId = row.id;
      this.getDetails();
      this.showDetails = true;
    },
    getDetails(){
      //获取参数
      let detailQuery = {
        "typeId":this.currentTypeId,
        "currentPage":this.detailCurrentPage,
        "pageSize":this.detailPageSize,
        "keyword":this.detailKeyword
      }
      //发送请求根据条件(id,currentpage,pagesize,keyword)查询有哪些细节
      this.$http.post("/detail/type",detailQuery)
          .then(result=>{
            result = result.data
            this.detailData = result.rows;
            this.detailToal = result.total;
          })
          .catch(result=>{
            this.$message({
              message: '细分加载失败，稍后重试！',
              type: 'error'
            });
          })
    },
    /* 细部高级查询 */
    detailSearch(){//高级查询一定要定位到第一页
      this.detailCurrentPage = 1;
      this.getDetails();
    },
    search(){//高级查询一定要定位到第一页
      this.currentPage = 1;
      this.getDtype();
    },
    /* 细部页面变动事件 */
    detailCurrentChange(val) {
      this.detailCurrentPage = val;
      this.getDetails();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDtype();
    },
    //获取类型列表
    getDtype() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.filters.keyword
      };
      this.listLoading = true;//开启列表忙等
      this.$http.post("/type/",para)
          .then(result=>{
            this.listLoading = false;//关闭列表忙等
            result  = result.data;
            this.dtype = result.rows;
            this.total = result.total;
          })
          .catch(result=>{
            console.log(result);
            this.$message({
              message: '员工表加载失败，稍后重试！',
              type: 'error'
            });
          })

    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {//确定
        this.listLoading = true;//开启列表加载忙等
        this.$http.delete("/type/"+row.id)
            .then(result=>{
              this.listLoading = false;//关闭列表加载忙等
              result = result.data;//AjaxResult
              if(!result.success){
                this.$message({
                  message: result.message,
                  type: 'error'
                });
              }else{
                this.$message({
                  message: "删除成功!!!",
                  type: 'success'
                });
              }
              //数据删除要定位到第一页
              if(this.dtype.length === 1 && this.currentPage > 1 ){
                this.currentPage--;
              }
              //刷新列表页
              this.getDtype();
            })
            .catch(result=>{
              console.log(result);
              this.$message({
                message: '系统繁忙，稍后重试！',
                type: 'error'
              });
            })
      }).catch(() => {//取消
      });
    },
    //显示detail编辑界面
    showDetailEdit: function (index, row) {
      this.detailSaveOrEditName = "编辑";
      this.detailEditFormVisible = true;
      //克隆  用于回显
      this.detailEditForm = Object.assign({}, row);
    },
    //显示detail新增界面
    showDetailAdd: function () {
      this.detailSaveOrEditName = "新增"
      this.detailEditFormVisible = true;
      this.detailEditForm = {//重置表单
        id: null,
        name:"",
        types_id:this.currentTypeId
      };
    },

    //显示tpye编辑界面
    handleEdit: function (index, row) {
      this.myTitle = "编辑";
      this.editFormVisible = true;
      //克隆  用于回显
      this.editForm = Object.assign({}, row);
    },
    //显示tpye新增界面
    handleAdd: function () {
      this.myTitle = "新增";
      this.editFormVisible = true;
      this.editForm = {//重置表单
        id: null,
        sn:"",
        name:""
      };
    },
    //编辑
    editSubmit: function () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            //拷贝一份表单数据
            let para = Object.assign({}, this.editForm);
            //发送axios请求
            this.$http.put("/type",para)
                .then(result=>{
                  result = result.data;
                  if(result.success){
                    this.$message({
                      message: this.myTitle + "成功!",
                      type: 'success'
                    });
                    this.editFormVisible = false;
                  }else{
                    console.log(result.message);
                    this.$message({
                      message: result.message,
                      type: 'error'
                    });
                  }
                  this.getDtype();
                })
                .catch(result=>{
                  console.log(result.message);
                  this.$message({
                    message: "后端请求繁忙!",
                    type: 'error'
                  });
                })
            this.editLoading = false;
          });
        }
      });
    },
    selsChange: function (sels) {//当前页面，所有选中的行的数据
      this.sels = sels;//把当前选中的所有行的数据，绑定给模型层，一会儿批量删除的时候用
    },
    //批量删除
    batchRemove: function () {
      //拿到当前选中的所有行的id，传给后端批量删除
      // [1,2,3]  .toString() --> "1,2,3"
      var ids = this.sels.map(item => item.id);//删除了toString
      this.$confirm('确认删除选中记录吗？', '温馨提示', {
        type: 'warning'
      }).then(() => {//确定删除
        this.$http.patch("/type",ids)
            .then(result=>{
              result = result.data;//AjaxResult
              if(!result.success){
                this.$message({
                  message: result.message,
                  type: 'error'
                });
              }else{
                this.$message({
                  message: "删除成功!!",
                  type: 'success'
                });
              }
              //数据删除要定位到第一页
              if(this.dtype.length === 1 && this.currentPage > 1){
                this.currentPage--;
              }
              this.getDtype();
            })
            .catch(result=>{
              console.log(result);
              this.$message({
                message: '系统繁忙，稍后重试！',
                type: 'error'
              });
            })
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getDtype();
  }
}

</script>

<style scoped>

</style>